<template>
  <div>
    <el-card
      :body-style="{ padding: '0px' }"
      v-for="item in topic_info"
      :key="item.topic_id"
    >
      <img :src="item.topic_pic" />
      <div style="padding: 15px; padding-bottom: 0">
        <a :href="'/topic/' + item.topic_id + ''">
          <h1>{{ item.topic_title }}</h1>
        </a>
        <div class="topic_content" v-html="item.topic_content"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      topic_info: []
    }
  },
  created () {
    this.getRandomTopic()
  },
  methods: {
    async getRandomTopic () {
      const { data: res } = await this.$http.post('random_topic', { topic_num: 2 })
      if (res.status === 200) {
        this.topic_info = res.topic_info
      }
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-left: 20px;
}

img {
  width: 100%;
}

.topic_content {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /deep/ p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
